<!--
 * @Description: 问卷编辑页面
 * @Author: liyujie
 * @Date: 2021/06/05
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/06/05
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <div class="select-wrapper">
                <div class="title">问卷题型</div>
                <div class="tools-view">
                    <div
                        class="tools-item"
                        v-for="(item,index) in toolsList"
                        :key="index"
                        @click="addFormItem(item)"
                    >
                        <div class="tools-title">
                            <i
                                class="iconfont left-icon"
                                :class="item.leftIcon"
                            />
                            <div class="text">{{ item.title }}</div>
                        </div>
                        <i class="el-icon-plus"/>
                    </div>
                </div>
            </div>
            <div class="form-wrapper">
                <div class="form-header">
                    <div class="title-view">
                        <i class="el-icon-edit"/>
                        <el-input
                            v-model="ruleForm.title"
                            class="title-input"
                            placeholder="请输入问卷标题..."
                        />
                    </div>
                    <div class="btn-view">
                        <div
                            class="btn-item"
                            @click="handleRoute('shopQuestionnaireList')"
                        >
                            返回
                        </div>
                        <div
                            class="btn-item"
                            @click="handlePreview"
                        >
                            预览问卷
                        </div>
                        <div
                            class="btn-item save"
                            @click="handleSubmit"
                        >
                            保存问卷
                        </div>
                    </div>
                </div>
                <div class="form-content">
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        ref="ruleForm"
                        label-position="top"
                    >
                        <el-form-item label="问卷说明">
                            <el-input
                                v-model="ruleForm.intro"
                                placeholder="请输入问卷说明"
                                type="textarea"
                                size="medium"
                                clearable
                                :autosize="{ minRows: 3, maxRows: 6}"
                                maxlength="500"
                                show-word-limit
                            />
                        </el-form-item>
                        <el-form-item
                            prop="start_time"
                            label="问卷调研填写开放时间"
                            class="is-required"
                        >
                            <el-date-picker
                                v-model="dateTimeRange"
                                type="datetimerange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                size="medium"
                                style="width: 390px"
                                value-format="timestamp"
                            />
                        </el-form-item>
                        <el-form-item label="提交成功提示语">
                            <el-input
                                v-model="ruleForm.submit_hint"
                                placeholder="请输入提交成功提示语"
                                size="medium"
                                clearable
                            />
                        </el-form-item>
                        <el-form-item
                            label="编辑问卷内容"
                            class="is-required"
                        >
                            <custom-form
                                class="custom-form"
                                ref="customForm"
                                :disabled="ruleForm.status === 0 || ruleForm.status === 2"
                                @send="getFormData"
                            />
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import { deepClone } from "@/assets/js/utils";
import CustomForm from "@/components/shop-questionnaire/custom-form-for-questionnaire";

export default {
    name: 'ShopQuestionnaireEdit',
    mixins: [back],
    components: {CustomForm},
    data() {
        return {
            // add新增 edit编辑 copy复制
            type: 'add',
            ruleForm: {
                sq_no: '',
                // 标题
                title: '',
                // 问卷说明
                intro: '',
                // 表单配置
                form_config: '',
                start_time: '',
                end_time: '',
                // 提示语
                submit_hint: '',
                status: 99
            },
            rules: {
                start_time: [
                    {required: true, message: '请选择问卷开放填写时间', trigger: 'change'}
                ]
            },
            toolsList: [{
                leftIcon: 'el-icon-hand-danxingwenbenicon1',
                title: '单行文本',
                type: 'text'
            },{
                leftIcon: 'el-icon-hand-duoxingwenbenicon1',
                title: '多行文本',
                type: 'textarea'
            },{
                leftIcon: 'el-icon-hand-danxuan',
                title: '单选',
                type: 'radio'
            },{
                leftIcon: 'el-icon-hand-duoxuan1',
                title: '多选',
                type: 'checkbox'
            }],
            submitLoading: false,
            dateTimeRange: [],
        };
    },
    computed: {},
    watch: {
        dateTimeRange(value) {
            this.ruleForm.start_time = value ? value[0] / 1000 : '';
            this.ruleForm.end_time = value ? value[1] / 1000 : '';
        }
    },
    filters: {},
    mounted() {
        let query = this.$route.query;

        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {title: '商家问卷', path: '/student/shop-questionnaire-list'},
            {title: `${query.type === 'edit' ? '复制问卷' : '新建问卷'}`}
        ]);
        this.authResult = this.$route.meta.authResult;
        this.ruleForm.sq_no = query.sq_no;
        this.type = query.type;
        if(query.type !== 'add') {
            this.getDetailData();
        }
    },

    methods: {
        /**
         * @description 获取数据
         */
        getDetailData() {
            let params = {
                sq_no: this.ruleForm.sq_no
            };

            this.$post('/student/shop_questionnaire%5Cget', params, res => {
                if (res.code === 1) {
                    let data = res.data;

                    this.ruleForm = data;
                    this.dateTimeRange = [data.start_time * 1000, data.end_time * 1000];
                    this.$refs.customForm.setList(JSON.stringify(data.form_config));
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * 提交
         */
        handleSubmit() {
            if (!this.ruleForm.title) {
                this.$notify({
                    title: '提示',
                    type: 'warning',
                    message: '请输入问卷标题'
                });
                return;
            }
            if(!this.ruleForm.form_config || this.ruleForm.form_config === '[]') {
                this.$notify({
                    title: '提示',
                    type: 'warning',
                    message: '请添加问卷内容'
                });
                return;
            }
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.submitLoading = true;
                    let params = deepClone(this.ruleForm);

                    if(this.type === 'copy') {
                        params.sq_no = '';
                    }
                    this.$post('/student/shop_questionnaire%5Csave', params, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                duration: 2000,
                                type: 'success'
                            });
                            this.handleRoute('shopQuestionnaireList');
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                        this.submitLoading = false;
                    });
                } else {
                    // 校验不通过
                    if(document.getElementsByClassName('el-form-item__error').length > 0){
                        this.$notify.warning({
                            title: '提示',
                            message: document.getElementsByClassName('el-form-item__error')[0].innerText
                        });
                    }
                    return false;
                }
            });
        },

        /**
         * 获取自定义表单数据
         * @param data
         */
        getFormData(data) {
            this.ruleForm.form_config = data;
        },

        /**
         * 添加内容
         * @param item
         */
        addFormItem(item) {
            if(this.ruleForm.status === 0 || this.ruleForm.status === 2) {
                this.$notify({
                    title: '提示',
                    type: 'warning',
                    message: '当前状态不允许添加内容'
                });
                return;
            }
            this.$refs.customForm.fnAddForm(item.type);
        },

        /**
         * 预览
         */
        handlePreview() {
            let data = deepClone(this.ruleForm);

            data.form_config = JSON.parse(data.form_config);
            data.form_config.forEach(item => {
                item.options.forEach((option, index) => {
                    option.value = index;
                });
            });
            data.form_config = JSON.stringify(data.form_config);
            sessionStorage.setItem('QUESTION_CUSTOM_FORM', JSON.stringify(data));

            const routeData = this.$router.resolve({
                name: 'shopQuestionnairePreview',
                query: {
                    sq_no: ''
                }
            });

            window.open(routeData.href, '_blank');
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        position: relative;
        margin: 12px;
        box-sizing: border-box;
        .select-wrapper {
            width: 256px;
            background: #fff;
            margin-right: 12px;
            flex-shrink: 0;
            .title {
                height: 64px;
                background: #FFFFFF;
                padding: 0 24px;
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #F0F2F7;
            }
            .tools-view {
                padding: 10px 24px;
                .tools-item {
                    height: 60px;
                    background: #FFFFFF;
                    border-radius: 4px;
                    margin-bottom: 10px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 12px;
                    font-size: 16px;
                    border: 1px solid #fff;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    &:hover {
                        color: #20A0FF;
                        border: 1px solid #20A0FF;
                        transition: all .2s;
                    }
                    .tools-title {
                        display: flex;
                        align-items: center;
                    }
                    .left-icon {
                        font-size: 20px;
                        margin-right: 6px;
                        color: #20A0FF;
                    }
                    .el-icon-plus {
                        font-size: 14px;
                    }
                }
            }
        }
        .form-wrapper {
            flex: 1;
            background: #fff;
            display: flex;
            flex-direction: column;
            .form-header {
                display: flex;
                justify-content: space-between;
                height: 64px;
                background: #FFFFFF;
                border-bottom: 1px solid #F0F2F7;
                padding: 10px 24px;
                flex-shrink: 0;
                .title-view {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    .title-input {
                        font-size: 16px;
                        height: 100%;
                        /deep/ .el-input__inner {
                            height: 100%;
                            border: 0;
                        }
                    }
                    i {
                        font-size: 20px;
                        color: #999;
                    }
                }
                .btn-view {
                    display: flex;
                    .btn-item {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0 24px;
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #666666;
                        border-right: 1px solid #F0F2F5;
                        cursor: pointer;
                        &.save {
                            border: 0;
                            color: #1890FF;
                            padding-right: 12px;
                        }
                    }
                }
            }
            .form-content {
                flex: 1;
                padding: 24px 62px;
                overflow-y: auto;
                &::-webkit-scrollbar {
                    width: 6px;
                }
            }
        }
    }

    /deep/ .el-form {
        .el-form-item__label {
            line-height: normal;
            margin-bottom: 12px;
            padding-bottom: 0;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
        }
        .is-required {
            .el-form-item__label {
                &:before {
                    content: "*";
                    display: inline-block;
                    color: #F56C6C;
                    margin-right: 4px;
                }
            }
        }
    }
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-textarea__inner {
        resize: none;
    }
    // 自定义表单样式
    /deep/ .custom-form {
        background: transparent;
        .box {
            background: transparent;
            padding: 0;
        }
        .container_header {
            display: none;
        }
        .main {
            width: 100%;
            .main_cont {
                padding: 20px 24px;
                background: #FFFFFF;
                border-radius: 4px;
                border: 1px solid #EEEEEE;
                margin-bottom: 12px;
                .main_checkbox_box, .main_radio_box {
                    align-items: center;
                }
                .main_text, .main_textarea, .main_radio, .main_checbox, .main_image_box, .main_image_ipt {
                    width: 100%;
                    .main_radio_head, .main_radio_list, .main_checkbox_list {
                        width: 100%;
                    }
                    .main_radio_list {
                        margin-left: 0;
                        padding-left: 123px;
                    }
                    .main_checkbox_list {
                        margin-left: 0;
                        padding-left: 60px;
                    }
                }
                .main_text, .main_textarea {
                    flex-direction: column;
                    .main-text-view {
                        display: flex;
                    }
                    .rules-type {
                        display: flex;
                        margin-top: 16px;
                        &__label {
                            margin-right: 38px;
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                        }
                    }
                }
            }
        }
        .no_data {
            height: 286px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px dashed #CAD0DC;
            width: 100%;
            font-size: 14px;
            color: #999999;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
        }
    }
}
</style>
